<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 两个表，其中一个表是核心的表，另外一个表属于报送的表，报送的表可以增删改（查？），同时还能增加删除报送的表 -->
<!--
		tab
		1 显示报送表明细,增删改
		2 显示当前未配置的核心表（直接显示，无修改） 
		3 显示对应表明细（增加删除，修改：首先查询下数据库有无此对应关系，如果无则更新）
		更新实现:选择当前旧值和新值生成SQL去实现
		
		1 搞一个验证有没有的ACTION，直接执行SQL，返回结果数组的json串 *
		2 搞一个可以根据tableID读取设置好的不同参数的ACTION *
		3 搞一个可以根据不同的参数返回不同结果集（JSON格式）的ACTION(包括没有配置的科目) *
		
		4statitemCode 不可更改
	 -->
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/easyui.css" rel="stylesheet" type='text/css' />
<link href="css/icon.css" rel="stylesheet" type='text/css' />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easyui.js"></script>
<script type="text/javascript">
	/**
	 *这里根据后台传递过来的值初始化更新表的信息
	 */
	var tableInfo = new Object() ;
	tableInfo.url = "tableUrl" ;//这里固定请求ACTION
	tableInfo.tableId = "tableId" ;//这里传输tableID
	tableInfo.statTableName = "statTableName" ;//报送表
	tableInfo.prpTableName = "prpTableName";//核心表
	tableInfo.mappingTableName = "mappingTableName";//对照关系表
</script>
<script type="text/javascript" src="js/mutiTablePublic.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/mutiTableConn.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/mutiTableStat.js" charset="UTF-8"></script>
<title>两个表关联</title>
</head>
<body>
	<div id='tableTabs' class='easyui-tabs' >
		<div title='报送明细表'>
			<table id="statTable"  class="easyui-datagrid"
				style="width: 700px; height: auto" url="statData.json"
				toolbar='#statBar' fitColumns="true" singleSelect="true">
				<thead>
					<tr>
						<th field="statItemCode" width="50">指标代码</th>
						<th field="statItemName" width="50">指标名称</th>
					</tr>
				</thead>
			</table>
			<div id="statBar">
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">新建指标</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton"  iconCls="icon-edit" plain="true" onclick="editItem()">修改指标</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delItem()">删除指标</a>
			</div>
		</div>
		<!-- end div 指标明细表 -->
		<div title='未配置表'>
			<table id="unConfigTable" class="easyui-datagrid"
				style="width: 700px; height: auto" url="unConfigData.json"
				fitColumns="true" singleSelect="true">
				<thead>
					<tr>
						<th field="itemCode" width="50">指标代码</th>
						<th field="itemName" width="50">指标名称</th>
					</tr>
				</thead>
			</table>
		</div>
		<!-- end div 未配置关系表 -->
		<div title='对应关系表'>
			<table id="mappingTable"  class="easyui-datagrid"
				style="width: 700px; height: auto" url="mappingData.json"
				toolbar="#mappingBar" fitColumns="true" singleSelect="true">
				<thead>
					<tr>
						<th colspan='2'>报送表</th>
						<th colspan='2'>核心表</th>
					</tr>
					<tr>
						<th field="statItemCode" width="50">指标代码</th>
						<th field="statItemName" width="50">指标名称</th>

						<th field="prpItemCode" width="50">指标代码</th>
						<th field="prpItemName" width="50">指标名称</th>
					</tr>
				</thead>
			</table>
			<div id="mappingBar">
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newConn()">新建关系</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton"  iconCls="icon-edit" plain="true" onclick="editConn()">修改关系</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delConn()">删除关系</a>
			</div>
		</div>
		<!-- end div 对应关系表 -->
	</div>
	<!-- end div tab -->
	<div id="mappingDlg" class="easyui-dialog" style="width:400px;height:150px;padding:10px 20px"  
            closed="true" buttons="#mappingButton">  
        <form id="mappingFm" method="post" novalidate>  
            <div class="fitem">  
                <label>报送表代码:</label>  
                <input name='statItemCode' id="mappingStatItemCode" class="easyui-combogrid" style="width:250px" data-options="  
		            panelWidth: 250,  
		            idField: 'statItemCode',  
		            textField: 'statItemName',  
		            url: 'statData.json',  
		            columns: [[  
		                {field:'statItemCode',title:'报送指标代码',width:30},  
		                {field:'statItemName',title:'报送指标名称',width:30}  
		            ]],  
		            fitColumns: true  
		        ">  
            </div>
            <div class="fitem">  
                <label>核心表代码:</label>  
                <input name='prpItemCode' id="mappingPrpItemCode" class="easyui-combogrid" style="width:250px" data-options="  
		            panelWidth: 250,  
		            idField: 'prpItemCode',  
		            textField: 'prpItemName',  
		            url: 'prpData.json',  
		            columns: [[  
		                {field:'prpItemCode',title:'核心指标代码',width:30},  
		                {field:'prpItemName',title:'核心指标名称',width:30}  
		            ]],  
		            fitColumns: true  
		        ">    
            </div>  
        </form>  
    </div>
    <div id="mappingButton">  
	    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="mappingSave()">确定</a>  
	    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:closeDialog('mappingDlg')">取消</a> 
    </div>
    <!-- end mapping dialog -->  
	<div id="statDlg" class="easyui-dialog" style="width:400px;height:150px;padding:10px 20px"  
            closed="true" buttons="#statButton">  
        <form id="statFm" method="post" novalidate>  
            <div class="fitem">  
                <label>指标代码:</label>  
                <input name="statItemCode" id='statItemCode' class="easyui-validatebox" >  
            </div>  
            <div class="fitem">  
                <label>指标名称:</label>  
                <input name="statItemName" id='statItemName' class="easyui-validatebox" >  
            </div>  
        </form>  
    </div>  
    <div id="statButton">  
	    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="itemSave()">确定</a>  
	    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:closeDialog('statDlg')">取消</a> 
    </div>
    <!-- end stat dialog -->  
</body>
</html>